<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body{
          margin: 0;
          padding: 0;
          cursor: pointer;
      }
      ul,li{
          list-style: none;
      }

 
      .setion{
          position: relative;
          overflow: hidden;

      }
      .first{
            background: url('images/11.jpg') no-repeat;
            background-size: cover;
            opacity: 0.6;
      }
      .first .first-title{
          height: 200px;
          width:100%;
      }
      .first .first-title ul {
           overflow: hidden;
          
      }
      .first .first-title ul li{
          margin: 0 auto;
         float: left;
 
         font-size: 120px;
    
         margin: 40px;
         
         opacity: 0.4;

      } 

      .first.current .first-title ul li {
          opacity: 1;
          transition:all 1s;
          margin: 40px 0;
      }

            
      .first .first-body{
       
          width: 100%;
          height:100%;
          display: flex;
          justify-content: space-between;
          margin-top: 50px;
          
      }

     
      .first .first-body .left {
          font-size: 30px;
          margin-left: 60px;
          transform: translate(-500px,0);
          opacity: 0.3;
      } 

      .first .first-body .rigth {
        font-size: 30px;
        margin-right: 200px;

        opacity: 0;
      } 
  
     
      
      .first.current .left{
        transform: translate(0,0);
        transition: all 1s 0.5s;
          opacity: 1;
      }    
      .first.current .rigth {
          transition: all 2s;
          opacity:1;
      } 




















/* 第二层 */
      .second{
            background: url('images/bg2.jpg') no-repeat;
            background-size: cover;
            opacity: 0.6;
            position: relative;
      }
      .second div{
        height: 200px;
        width:100%;
    }
    .second ul {
         overflow: hidden;
        
    }
    .second .second-title ul li{
      
       float: left;

       font-size: 100px;
  
       margin: 20px 40px;
       
       opacity: 0.4;
    } 
    
    .second-body .container {
        margin-left: 40px;
        margin: 0 auto;
        position: absolute;
        left:300px;
        top: 250px;
    }
    .second-body .container p span {
        font-size: 20px;
    }
    
    .second-body .container ul li:nth-child(1){
        font-size: 12px;
       
    }
    
    .second-body .container ul li+li{
        margin:10px;
        font-weight: bolder;
    }

    /* 动画 */
    .second.current .second-title ul li {
        opacity: 1;
        animation: move 2s infinite;
    }

    @keyframes move
    {
    0%   {
        margin: 20px 40px
        }

    50%  {
        margin: 20px 0px
        }
    100% {
        margin: 20px 40px
        }
    }
    
    .second.current .container{
        transform: scale(1.5);
        transition: all 1s ;
 
    }












/* 第三层 */
      .three{
            background: url('images/bg3.jpg') no-repeat;
            background-size: cover;
            opacity: 0.6;
      }
      .three .three-title{
          height: 200px;
          width:100%;
      }
      .three .three-title ul {
           overflow: hidden;
          
      }
      .three .three-title ul li{
          margin: 0 auto;
         float: left;
 
         font-size: 120px;
    
         margin: 40px;
         
         opacity: 0.4;

      } 

      .three.current .three-title ul li {
          opacity: 1;
          transition:all 1s;
          margin: 40px 0;
      }

            
      .three .three-body{
       
          width: 100%;
          height:100%;
          display: flex;
          justify-content: space-between;
          margin-top: 50px;
          
      }

     
      .three .three-body .left {
          font-size: 15px;
          margin-left: 60px;
          transform: translate(500px,0);
          opacity: 0;
      } 

      .three .three-body .rigth {
        font-size: 30px;
        margin-right: 200px;
        transform: translate(-500px,0);
        opacity: 0;
      } 
  
     
      
      .three.current .left{
        transform: translate(0,0);
        font-size: 30px;
        transition: all 1s 0.5s;
          opacity: 1;
      }    
      .three.current .rigth {
        transform: translate(0,0);        
          transition: all 2s;
          opacity:1;
      } 












/* 第四层 */
      .four{
            background: url('images/bg4.jpg') no-repeat;
            background-size: cover;
            opacity: 0.6;
      }
       .four .four-title{
          height: 200px;
          width:100%;
          margin-left: 200px;
          margin-top: 100px;

      }
            .four .four-title ul {
           overflow: hidden;
/*           margin:80px 200 80px 200px;*/
          
      }
      .four .four-title ul li{
          margin: 0 auto;
         float: left;
 
         font-size: 50px;
    
         margin: 20px;
         
         opacity: 0.4;

      } 

      .four .four-body ul {
        margin-left:200px;
      }
      .four .four-body ul li {
        font-size: 8px;

      }
      .four .four-body ul li+li{
        margin-top:20px;
      }
      .four .four-body ul li:nth-last-child(1){
          font-size: 30px;
      }
      /*动画*/
      .four.current .four-title {
          transform:rotate(360deg) scale(1.3) ;
          transition: all 1s;
          margin-top: 100px;
          font-weight: bolder;
      }
       .four.current .four-body{
          transform:scale(1.3) rotate(-360deg);
          transition: all 1s;
          font-weight: bolder;
       }
    </style>    
    
</head>
<body>

    <section id="fullpage">
<!-- 第一屏 -->
        <section class="section first">
          <section class="first-title">
              <ul>
                  <li>W</li>
                  <li>e</li>
                  <li>b</li>
                  <li>前</li>
                  <li>端</li>
                  <li>开</li>
                  <li>发</li>
                  
              </ul>
          </section>

          <section class="first-body">
              <!-- 左 -->
              <div class="left">
                  <p>姓    名：&nbsp; 满意</p>
                  <p>电    话：&nbsp; 0139-4061-2635</p>
                  <p>邮    箱：&nbsp; Satisfy2635@163.com</p>
                  <p>工作经验：&nbsp; 2 年</p>
                  
              </div>
              <!-- 右 -->
              <div class="rigth">
                  <p>性    别：&nbsp; 男</p>
                  <p>年    龄：&nbsp; 26</p>
                  <p>学    历：&nbsp; 本科</p>
              
              </div>
          </section>
        </section>
<!-- 第二屏 -->
        <section class="section second">
            <div class="second-title">
                <ul>
                    <li>工</li>
                    <li>作</li>
                    <li>经</li>
                    <li>历</li>
                </ul>
            </div>
            <div class="second-body">
               <section class="container">
   
                     <p>
                         <span>工作单位:</span>
                         <span>辽宁灵动科技发展有限公司</span>
                     </p>
                     <ul>
                         <li>工作职责</li>
                         <li>1.根据客户产品需求，与项目经理和技术团队进行充分沟通，按照原型图，与UI人员商讨设计页面布局;</li>
                         <li>2.根据 PSD 图 选取合适的框架快速搭建静态页面;</li>
                         <li>  3.选取合适的布局方式，完成终端适配;</li>
                         <li> 4.使用jQuery或原生 JS网页的动态交互;</li>
                         <li> 5.解决主流浏览器兼容性问题，并根据需要不断修改，完善代码功能;</li>
                         <li>6.根据后台接口数据，使用 ajax 调用后台接口，使用 art-template 快速渲染页面;</li>
                     </ul>
  
               </section>
            </div>
        </section>       
<!--  第三屏 -->
        <section class="section three">
            <section class="three-title">
                <ul>
                    <li>求</li>
                    <li>职</li>
                    <li>意</li>
                    <li>向</li>
                  
                    
                </ul>
            </section>
  
            <section class="three-body">
                <!-- 左 -->
                <div class="left">
                    <p>工作性质：&nbsp; 全职</p>
                    <p>期望行业：&nbsp; 前端Web开发工程师</p>
                    <p>工作地区：&nbsp; 北京</p>
                    
                </div>
                <!-- 右 -->
                <div class="rigth">
                    <p>期望月薪：&nbsp; 12K</p>
                    <p>目前情况：&nbsp;离职状态，一周之内可以到岗</p>

                
                </div>
            </section> 
        </section>
<!-- 第四屏 -->
        <section class="section four">
          <section class="four-title">
             <ul>
                  <li>自</li>
                  <li>我</li>
                  <li>评</li>
                  <li>价</li>                 
             </ul>
          </section>
          <section class="four-body">
            <ul>
              <li>1.喜欢新鲜的事物，对于任何事物都想尝试一下</li>
              <li>2.能够正确的认识自己的不足</li>
              <li>3.有较强的自控力</li>
              <li>
                <a href="https://gitee.com/RiGuangXiaDeYue/resume">观看后选择</a>
              </li>
            </ul>

          </section>
        </section>
    </section>
    
   

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.fullPage1.min.js"></script>
    <script>
         $(function () {
            $('#fullpage').fullpage({
    
   
                afterLoad: function (anchorLink, index) {
                    //移除所有的current
                    $(".section").removeClass("current");
                    setTimeout(function () {
                        $(".section").eq(index - 1).addClass("current");
                    }, 200);
    
                }
            });
        });
    </script>
</body>
</html>
